<template>
  <ElContainer style="height: 100%">
    <ElMain class="archive-info">
      <ElForm ref="formRef" :inline="true" :model="formModel" :show-message="false">
        <CardBox header="地址信息">
          <!--          <ElFormItem label="省" prop="a00_03_04">-->
          <!--            <ElInput v-model="formModel.a00_02_93" readonly />-->
          <!--          </ElFormItem>-->
          <!--          <ElFormItem label="市" prop="a00_02_94">-->
          <!--            <ElInput v-model="formModel.a00_02_94" readonly />-->
          <!--          </ElFormItem>-->
          <!--          <ElFormItem label="区县" prop="a00_02_95">-->
          <!--            <ElInput v-model="formModel.a00_02_95" readonly />-->
          <!--          </ElFormItem>-->
          <br />
          <ElFormItem label="社区" prop="a00_02_97">
            <el-cascader :show-all-levels="false" :options="communityOptions"
              :props="{ label: 'u_name', value: 'u_name', emitPath: false }" filterable v-model="formModel.a00_02_97" />
          </ElFormItem>
          <ElFormItem label="详细地址" prop="a00_02_13" required>
            <ElInput v-model="formModel.a00_02_13" />
          </ElFormItem>
          <ElFormItem>
            注意：详细地址(组)中只需输入门牌号或组，请勿重复输入省市县乡村等信息。例如：一组或城西一里1号202室
          </ElFormItem>
        </CardBox>
        <CardBox header="家庭情况">
          <ElFormItem label="家庭卡号" prop="a00_02_100">
            <ElInput v-model="formModel.a00_02_100" />
          </ElFormItem>
          <ElFormItem label="家庭电话1" prop="a00_02_119">
            <ElInput v-model="formModel.a00_02_119" />
          </ElFormItem>
          <br />
          <ElFormItem label="医疗证号" prop="a00_02_31">
            <ElInput v-model="formModel.a00_02_31" />
          </ElFormItem>
          <ElFormItem label="家庭电话2" prop="a00_02_10">
            <ElInput v-model="formModel.a00_02_10" />
          </ElFormItem>
          <br />

          <ElFormItem label="厨房排风设施" prop="a00_02_111">
            <ElRadioGroup v-model="formModel.a00_02_111">
              <ElRadio v-for="(value, key) in formSource.a00_02_111" :label="key" :key="key">{{ value }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <br />

          <ElFormItem label="燃料类型" prop="a00_02_112">
            <ElRadioGroup v-model="formModel.a00_02_112">
              <ElRadio v-for="(value, key) in formSource.a00_02_112" :label="key" :key="key">{{ value }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <br />

          <ElFormItem label="饮水" prop="a00_02_113">
            <ElRadioGroup v-model="formModel.a00_02_113">
              <ElRadio v-for="(value, key) in formSource.a00_02_113" :label="key" :key="key">{{ value }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <br />

          <ElFormItem label="厕所" prop="a00_02_114">
            <ElRadioGroup v-model="formModel.a00_02_114">
              <ElRadio v-for="(value, key) in formSource.a00_02_114" :label="key" :key="key">{{ value }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <br />

          <ElFormItem label="禽畜栏" prop="a00_02_115">
            <ElRadioGroup v-model="formModel.a00_02_115">
              <ElRadio v-for="(value, key) in formSource.a00_02_115" :label="key" :key="key">{{ value }}</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <br />
          <ElFormItem>
            <ElFormItem label="住宅面积(㎡)" prop="a00_02_14">
              <ElInput type="number" v-model="formModel.a00_02_14" />
            </ElFormItem>
            <ElFormItem label="住房间数" prop="a00_02_15">
              <ElInput type="number" v-model="formModel.a00_02_15" />
            </ElFormItem>
            <ElFormItem label="厨房面积(㎡)" prop="a00_02_18">
              <ElInput type="number" v-model="formModel.a00_02_18" />
            </ElFormItem>
            <ElFormItem label="厨房间数" prop="a00_02_19">
              <ElInput type="number" v-model="formModel.a00_02_19" />
            </ElFormItem>
          </ElFormItem>
          <ElFormItem label="经济状况">
            <ElFormItem label="家庭每月人均收入" prop="a00_02_24">
              <ElInput type="number" v-model="formModel.a00_02_24">
                <template #append>元</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label="总支出" prop="a00_02_15">
              <ElInput type="number" v-model="formModel.a00_02_25">
                <template #append>元/人/月</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label="饮食支出" prop="a00_02_26">
              <ElInput type="number" v-model="formModel.a00_02_26">
                <template #append>元/人/月</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label="医疗支出" prop="a00_02_27">
              <ElInput type="number" v-model="formModel.a00_02_27">
                <template #append>元/人/月</template>
              </ElInput>
            </ElFormItem>
          </ElFormItem>
          <ElFormItem label="未成年子女数" prop="a00_02_35">
            <ElInput type="number" v-model="formModel.a00_02_35" />
          </ElFormItem>
          <ElFormItem label="负担老人数" prop="a00_02_35">
            <ElInput type="number" v-model="formModel.a00_02_36" />
          </ElFormItem>
        </CardBox>
        <CardBox header="医疗机构">
          <ElFormItem label="责任医生">
            <ElSelect v-model="formModel.a00_02_91">
              <ElOption v-for="item in doctorsList" :key="item.id" :value="item.name" :label="item.name" />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="建档日期" prop="a00_02_35">
            <ElDatePicker v-model="formModel.a00_02_29" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </ElFormItem>
          <br />
          <ElFormItem style="width: 100%" label="备注" prop="a00_02_37">
            <ElInput style="width: 100%" type="textarea" :autosize="{ minRows: 3 }" v-model="formModel.a00_02_37" />
          </ElFormItem>
        </CardBox>
        <!-- <br /><br />
        <CardBox header="家庭成员列表">
          <ElTable>
            <el-table-column prop="date" label="姓名" width="180" />
            <el-table-column prop="date" label="性别" width="180" />
            <el-table-column prop="date" label="出生日期" width="180" />
            <el-table-column prop="date" label="电话" width="180" />
            <el-table-column prop="date" label="户籍地址" width="180" />
            <el-table-column prop="date" label="身份证号码" width="180" />
            <el-table-column prop="date" label="与户主关系" width="180" />
          </ElTable>
        </CardBox> -->
      </ElForm>
    </ElMain>
  </ElContainer>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from "vue";
import { IA00_02, modelUtils } from "@/model";
import { a00_02 } from "@/dict";
import { ElForm } from "element-plus";
import { saveFamilyArchives } from "@/api/archives";
import { useRequestSelect } from "@/hooks/useRequestSelect";
import { useCommunitySelect, useDoctorSelect } from "../useCommonApi";
import { cloneDeep } from "lodash-es";
const { doctorsList } = useDoctorSelect();
const { communityOptions } = useCommunitySelect();
const props = defineProps<{
  familyArchive?: IA00_02;
}>();

const formModel = ref(modelUtils.createFamilyArchive());
if (props.familyArchive) {
  formModel.value = cloneDeep(props.familyArchive);
}

const formSource = reactive(a00_02);

const formRef = ref<InstanceType<typeof ElForm>>();

const save = async () => {
  const data = await formRef.value?.validate();
  console.log(data);
  if (data) {
    // TODO:保存操作
    console.log(toRaw(formModel));
    return saveFamilyArchives(toRaw(formModel));
  }
};
//
// const initFamily = async () => {
//   const data = await getFamilyArchivesByCardId(props.cardId)
//   if (!data) {
//     //  新增
//     const result = await ElMessageBox({
//       message: "此人无家庭档案，新增家庭档案？",
//       confirmButtonText: "新增档案",
//       cancelButtonText: "取消"
//     })
//     if (result === "confirm") {
//       //  TODO:新增家庭档案的创建初始化
//       //  1.家庭档案号生成
//     } else {
//       emits("closeOnNull")
//     }
//   } else {
//     Object.assign(formModel, data)
//   }
// }
//

defineExpose({ save });
</script>
<style lang="scss">
.input-number-width {
  .el-input__inner {
    width: 80px;
  }
}

.archive-info {
  input[type="number"] {
    width: 100px;
  }

  .el-tabs__content {
    overflow: auto;
    height: calc(100vh - 340px);
  }
}

:deep(.el-table__row .el-form-item) {
  margin-bottom: 0;
}
</style>
